<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改公告')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-notice-edit" th:object="${notice}">
        <input id="noticeId" name="noticeId" th:field="*{noticeId}" type="hidden">
        <div class="form-group">
            <label class="col-sm-2 control-label"><span style="color: red; ">*</span>公告编号：</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" name="noticeSn" th:field="*{noticeSn}"
                       id="noticeSn" readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span style="color: red; ">*</span>公告类型：</label>
            <div class="col-sm-6">
                <select name="noticeType" class="form-control m-b" th:with="type=${@dict.getType('sys_notice_type')}" readonly>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{noticeType}" disabled></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span style="color: red; ">*</span>公告封面图：</label>
            <div class="col-sm-6">
                <input class="form-control" type="file" id="imageBtn" name="imageBtn" onchange="uploadCoverUrlImg(21)"/>
                <input class="form-control" name="coverUrl" id="coverUrl" type="hidden" th:value="*{coverUrl}">
                <span class="help-block m-b-none" style="color: red; "><i class="fa fa-info-circle"></i>封面图推荐尺寸为：335px × 254px</span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label"><span style="color: red; ">*</span>公告内容图：</label>
            <div class="col-sm-6">
                <input class="form-control" type="file" id="imageBtn2" name="imageBtn2"
                       onchange="uploadNoticeContentImg(22)"/>
                <input class="form-control" name="noticeContent" id="noticeContent" type="hidden"
                       th:value="*{noticeContent}">
                <span class="help-block m-b-none" style="color: red; "><i class="fa fa-info-circle"></i>内容图推荐尺寸为：1242px × 1808px</span>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
    var prefix = ctx + "back/notice";
    var initData = {
        coverUrl: $("#coverUrl").val(),
        noticeContent: $("#noticeContent").val()
    };

    //上传图片文件
    $("#imageBtn").fileinput({
        language: 'zh', //设置语言
        dropZoneTitle: '拖拽文件到这里 &hellip;<br>仅支持上传一张图片<br>多次上传替换前一张图片',
        allowedFileExtensions: ['jpg', 'png', 'bmp', 'jpeg'],//接收的文件后缀
        showUpload: false, //是否上传文件
        showRemove: true,
        dropZoneEnabled: true,//是否显示拖拽区域
        initialPreview: '<img src="' + initData.coverUrl + '" class="file-preview-image" width="210px" height="160px" alt="站点LOGO" title="站点LOGO">',
        initialPreviewFileType: 'images',// 文件类型: 图片为images 其他为object
        maxFileCount: 1,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
    }).on('fileclear', function (event, id) {
        $.modal.alertSuccess("删除图片成功！")
        $("#coverUrl").val('');
    });

    //上传图片文件
    $("#imageBtn2").fileinput({
        language: 'zh', //设置语言
        dropZoneTitle: '拖拽文件到这里 &hellip;<br>仅支持上传一张图片<br>多次上传替换前一张图片',
        allowedFileExtensions: ['jpg', 'png', 'bmp', 'jpeg'],//接收的文件后缀
        showUpload: false, //是否上传文件
        showRemove: true,
        dropZoneEnabled: true,//是否显示拖拽区域
        initialPreview: '<img src="' + initData.noticeContent + '" class="file-preview-image" width="172px" height="250px" alt="营业执照" title="营业执照">',
        initialPreviewFileType: 'images',// 文件类型: 图片为images 其他为object
        maxFileCount: 1,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
    }).on('fileclear', function (event, id) {
        $.modal.alertSuccess("删除图片成功！")
        $("#noticeContent").val('');
    });

    //通用上传文件
    function ajaxUploadFile(callback, file, modelType) {
        var formdata = new FormData();
        formdata.append("file", file);
        formdata.append("modelType", modelType);
        $.modal.loading("上传中...");
        $.ajax({
            url: ctx + "back/upload/image",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function (result) {
                $.modal.closeLoading();
                callback(result);
            },
            error: function () {
                $.modal.closeLoading();
                $.modal.alertWarning("图片上传失败");
            }
        })
    }

    //公司logo上传
    function uploadCoverUrlImg(modelType) {
        var files = document.getElementById('imageBtn');
        if (files) {
            ajaxUploadFile(function (result) {
                if (result.code == 0) {
                    $.modal.alertSuccess("上传封面图成功！")
                } else {
                    $.modal.alertError("上传图片失败，请重试");
                }
                $("#coverUrl").val(result.url);
            }, files.files[0], modelType);
        }
    }

    function uploadNoticeContentImg(modelType) {
        var files = document.getElementById('imageBtn2');
        if (files) {
            ajaxUploadFile(function (result) {
                if (result.code == 0) {
                    $.modal.alertSuccess("上传内容图成功！")
                } else {
                    $.modal.alertError("上传图片失败，请重试");
                }
                $("#noticeContent").val(result.url);
            }, files.files[0], modelType);
        }
    }

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-notice-edit').serialize());
        }
    }
</script>
</body>
</html>
